{% load i18n %}
{% load bootstrap3 %}
{% load formset_tags %}
<div class="formset" data-formset data-formset-prefix="{{ formset.prefix }}">
    {{ formset.management_form }}
    {% bootstrap_formset_errors formset %}
    <div data-formset-body>
        {% for form in formset %}
            <div class="panel panel-default" data-formset-form>
                <div class="sr-only">
                    {{ form.id }}
                    {% bootstrap_field form.DELETE form_group_class="" layout="inline" %}
                    {% bootstrap_field form.ORDER form_group_class="" layout="inline" %}
                </div>
                <div class="panel-heading">
                    <h4 class="panel-title">
                        <div class="row">
                            <div class="col-md-9">
                                {% bootstrap_field form.value layout='inline' form_group_class="" %}
                            </div>
                            <div class="col-md-3 text-right flip">
                                <button type="button" class="btn btn-default" data-formset-move-up-button>
                                    <i class="fa fa-arrow-up"></i></button>
                                <button type="button" class="btn btn-default" data-formset-move-down-button>
                                    <i class="fa fa-arrow-down"></i></button>
                                <button type="button" class="btn btn-delete btn-danger" data-formset-delete-button>
                                    <i class="fa fa-trash"></i></button>
                                {% if form.instance.id %}
                                    <br><small class="text-muted">#{{ form.instance.id }}</small>
                                {% endif %}
                            </div>
                        </div>
                    </h4>
                </div>
                <div class="panel-body form-horizontal">
                    {% if form.instance.pk and not form.instance.quotas.exists %}
                        <div class="alert alert-warning">
                            {% blocktrans trimmed %}
                                Please note that your variation will <strong>not</strong> be available for sale
                                until you have added it to an existing or newly created quota.
                            {% endblocktrans %}
                        </div>
                    {% endif %}
                    {% bootstrap_form_errors form %}
                    {% bootstrap_field form.active layout="control" %}
                    {% bootstrap_field form.default_price addon_after=request.event.currency layout="control" %}
                    {% bootstrap_field form.original_price addon_after=request.event.currency layout="control" %}
                    {% bootstrap_field form.description layout="control" %}
                </div>
            </div>
        {% endfor %}
    </div>
    <script type="form-template" data-formset-empty-form>
        {% escapescript %}
            <div class="panel panel-default" data-formset-form>
                <div class="sr-only">
                    {{ formset.empty_form.id }}
                    {% bootstrap_field formset.empty_form.DELETE form_group_class="" layout="inline" %}
                    {% bootstrap_field formset.empty_form.ORDER form_group_class="" layout="inline" %}
                </div>
                <div class="panel-heading">
                    <h4 class="panel-title">
                        <div class="row">
                            <div class="col-md-9">
                                {% bootstrap_field formset.empty_form.value layout='inline' form_group_class="" %}
                            </div>
                            <div class="col-md-3 text-right flip">
                                <button type="button" class="btn btn-default" data-formset-move-up-button>
                                    <i class="fa fa-arrow-up"></i></button>
                                <button type="button" class="btn btn-default" data-formset-move-down-button>
                                    <i class="fa fa-arrow-down"></i></button>
                                <button type="button" class="btn btn-delete btn-danger" data-formset-delete-button>
                                    <i class="fa fa-trash"></i></button>
                            </div>
                        </div>
                    </h4>
                </div>
                <div class="panel-body form-horizontal">
                    {% bootstrap_field formset.empty_form.active layout="control" %}
                    {% bootstrap_field formset.empty_form.default_price addon_after=request.event.currency layout="control" %}
                    {% bootstrap_field formset.empty_form.original_price addon_after=request.event.currency layout="control" %}
                    {% bootstrap_field formset.empty_form.description layout="control" %}
                </div>
            </div>
        {% endescapescript %}
    </script>
    <p>
        <button type="button" class="btn btn-default" data-formset-add>
            <i class="fa fa-plus"></i> {% trans "Add a new variation" %}</button>
    </p>
</div>
